<template>
<div class="contact m-t-100 flex flex-column flex-center">
    <div class="container">
        <div class="flex flex-column">
            <div class="flex flex-center">
                 <div :style="locale=='ch'?'width:230px':'width:300px'" ><a-divider class="contact-t" ><span>{{$t('index.contact')}}</span> </a-divider></div>
            </div>
            <div class="contact-p flex flex-center">
                <!-- <div class="contact-p-item address flex">
                    <div><i class="icon-address"></i></div>
                    <div>No. 588, Middle Section of Tianfu Avenue,Chengdu, Sichuan Province</div>
                </div> -->
                <div class="contact-p-item fax flex" v-if="!isMobile">
                    <div><i class="icon-fax"></i></div>
                    <div>Contact us at partners@onlogy.com</div>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <div><i class="icon-phone"></i></div>
                    <div>400-0566-888</div>
                </div>
                <!-- <div class="contact-p-item phone flex">
                    <div><i class="icon-phone"></i></div>
                    <div>400-0566-888</div>
                </div> -->

            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import api from "~/assets/js/api";
export default {
    props: {
        scroll: {
            type: Number
        },
    },
    data() {
        return {
            isMobile: false,
            visible: false,
            confirmLoading: false,
            form: {
                phone: ''
            },
            rules: {
                phone: [{
                    required: true,
                    message: 'is require',
                    trigger: 'blur'
                }]
            }
        }
    },
    computed: {
        ...mapGetters(['info','locale'])
    },
    mounted() {
        this.isMobile = this.storage.mb()
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.contact {
    // background: url("@/static/image/footer-bg.jpg") no-repeat center center;
    background: url("@/static/image/foter.png") no-repeat center center;

    height: 221px;
    background-size: 100%;
}

.flexc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 100px !important;
}

.contact-t {
    font-size: 36px;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    line-height: 1;
}

.contact-c {
    text-align: center;
}

.contact-c span {
    padding: 15px 50px;
    background: #FFF;
    color: #000;
    text-align: center;
    border-radius: 100px;
    font-size: 20px;
    font-weight: 200;
}

.contact-p {
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-weight: 200;
    line-height: 1;
    margin-top: 30px;
}

.contact-p .contact-p-item {
    padding: 0 30px;
    position: relative;
    align-items: center;
}

.contact-p .contact-p-item::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    display: block;
    content: "";
    font-size: 12px;
    width: 1px;
    height: 12px;
    overflow: hidden;
    background: #b17777;
}

.contact-p .contact-p-item:last-child::after {
    display: none;
}

.contact-p i {
    margin-right: 10px;
}

.contact-p i {
    width: 20px;
    height: 20px;
}
.icon-address {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("@/static/image/icon-address.png") no-repeat center center;
  background-size: auto;
  background-size: cover;
}
.icon-phone {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("@/static/image/icon-phone.png") no-repeat center center;
    background-size: auto;
  background-size: cover;
}
.icon-fax {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("@/static/image/icon-fax.png") no-repeat center center;
    background-size: auto;
  background-size: cover;
}

.flex {
    display: flex;
}

.flex-inline {
    display: inline-flex;
}

.flex-inline-important {
    display: inline-flex !important;
}

.flex-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column.flex-reverse {
    flex-direction: column-reverse;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-start {
    justify-content: flex-start;
}

.flex-center {
    justify-content: center;
}

.flex-end {
    justify-content: flex-end;
}

.flex-between {
    justify-content: space-between;
}

.flex-around {
    justify-content: space-around;
}

.flex-evenly {
    justify-content: space-evenly;
}

.flex-items-start {
    align-items: flex-start;
}

.flex-items-center {
    align-items: center;
}

.flex-items-end {
    align-items: flex-end;
}

.flex-items-baseline {
    align-items: baseline;
}

.flex-items-stretch {
    align-items: stretch;
}

.flex-self-start {
    align-self: flex-start;
}

.flex-self-center {
    align-self: center;
}

.flex-self-end {
    align-self: flex-end;
}

.flex-self-baseline {
    align-self: baseline;
}

.flex-self-stretch {
    align-self: stretch;
}

.flex-content-start {
    align-content: flex-start;
}

.flex-content-center {
    align-content: center;
}

.flex-content-end {
    align-content: flex-end;
}

.flex-content-between {
    align-content: space-between;
}

.flex-content-around {
    align-content: space-around;
}

.flex-middle {
    justify-content: center;
    align-items: center;
    align-self: center;
    align-content: center;
}

.flex-fill {
    flex: 1 1 auto;
}
</style>
